<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- STYLESHEETS -->
    <!--[if lt IE 9]>
    <script src="../../js/flot/excanvas.min.js"></script>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" />
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" />
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
    <link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
    <link rel="stylesheet" type="text/css" href="../../css/responsive.css">
    <link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- SELECT2 -->
    <link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css" />
    <!-- UNIFORM -->
    <link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css" />
    <style>
        .data-sta-top .data-sta-btn {
			float: left;
			margin-right: 10px;
		}

		.data-sta .active {
			background-color: transparent;
			color: #000;
		}

		.data-sta .data-sta-money {
			line-height: 30px;
			padding: 10px 0;
		}

		.data-sta .data-sta-money em {
			font-style: normal;
			font-size: 18px;
			margin-left: 5px;
			color: #f60;
		}

		.data-sta .data-sta-money span {
			min-width: 100px;
			margin-right: 60px;
			display: inline-block;
		}

		.index-term {
			line-height: 34px;
		}

		.index-term .radio-inline input {
			margin-top: 9px;
		}
        .dataTables_scrollBody table td,
        .dataTables_scrollHeadInner table th{
            text-align: center;
        }
        .shop-name {
            color: red;
        }
	</style>
</head>

<body>
    <header class="navbar clearfix" id="header"> </header>

    <!-- PAGE -->
    <section id="page">
        <!-- SIDEBAR -->
        <div id="sidebar" class="sidebar">
            <div class="sidebar-menu nav-collapse">

                <!-- SIDEBAR MENU -->
                <ul>
                </ul>
            </div>


        </div>
        <!-- /SIDEBAR -->
        <div id="main-content">

            <div class="container">
                <div class="row">
                    <div id="content" class="col-lg-12">
                        <!-- PAGE HEADER-->
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="page-header">
                                    <!-- STYLER -->

                                    <!-- /STYLER -->
                                    <!-- BREADCRUMBS -->
                                    <ul class="breadcrumb">
                                        <li>
                                            <i class="fa fa-home"></i>
                                            <a href="index.html">首页</a>
                                        </li>
                                        <li>
                                            <a href="#">数据统计</a>
                                        </li>
                                        <li>销售看板</li>
                                    </ul>
                                    <!-- /BREADCRUMBS -->

                                </div>
                            </div>
                        </div>
                        <!-- /PAGE HEADER -->
                        <div class="row">
                            <div class="col-md-12">
                                <form class="form-horizontal" role="form" id="form_Order">
                                    <div class="form-group mrg-bt10">
                                        <label class="col-sm-1 control-label" style="width: auto">日期区间：</label>
                                        <div class="col-sm-4" style="display: inline-flex; margin-left: -10px">
                                            <div class="col-sm-2" style="width: 130px">
                                                <input type="text" name="startDate" class="form-control bootstrap-datepicker">
                                            </div>
                                            <div style="width: 20px">至</div>
                                            <div class="float-left" style="width: 130px">
                                                <input type="text" name="endDate" class="form-control bootstrap-datepicker">
                                            </div>
                                        </div>
                                        <div class="col-sm-1">
                                            <a class="btn btn-primary search">查询</a>
                                        </div>
                                    </div>
                                </form>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="box border primary">
                                            <div class="box-body">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div id='board-column' style='height:800px'>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /CONTENT-->
                </div>
            </div>
        </div>
    </section>
    <!--/PAGE -->
    <!-- JAVASCRIPTS -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- JQUERY -->
    <script src="../../js/jquery/jquery-2.0.3.min.js"></script>
    <!-- spinner -->
    <script src="../../js/spinner/spin.js"></script>
    <!-- BOOTSTRAP -->
    <script src="../../bootstrap-dist/js/bootstrap.min.js"></script>
    <!-- BLOCK UI -->
    <script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>

    <!-- AUTOSIZE -->
    <script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
    <!-- DATA TABLES -->
    <script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
    <script type="text/javascript" src="../../js/datatables/datatable.js"></script>
    <script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
    <script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
    <script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>
    <script type="text/javascript" src="../../js/datepicker/datepicker.js"></script>
    <!-- SELECT2 -->
    <script type="text/javascript" src="../../js/select2/select2.min.js"></script>
    <!-- UNIFORM -->
    <script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
    <!-- COOKIE -->
    <script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <!-- CUSTOM SCRIPT -->
    <script src="../../js/script.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/echarts.min.js"></script>
    <script>
        $(function () {
            $.initDate($("#form_Order"), -10, 0);
            var startDate = $("input[name=startDate]").val();
            var endDate = $("input[name=endDate]").val();
            var getBoardInfos = function () {
                $.ajax({
                    type: "get",
                    url: App.getContextPath() +
                        "admin/report/reportOrderUser.do",
                    data: {startDate: startDate, endDate: endDate},
                    async: true,
                    success: function (result) {
                        if (result.type === 'success') {
                            var dates = [];
                            var newUsers = [];
                            var oldUsers = [];
                            var pbNewUsers = [];
                            var pbOldUsers = [];
                            var data = result.extra;
                            for (var index = 0; index < data.length; index++) {
                                var element = data[index];
                                dates.push(element.key);
                                newUsers.push(element.newUserCount);
                                oldUsers.push(element.oldUserCount);
                                pbNewUsers.push(element.pbNewUserRate);
                                pbOldUsers.push(element.pbOldUserRate);
                            }
                            createBoard(dates, newUsers, oldUsers, pbNewUsers, pbOldUsers);
                        }
                        
                    }
                });
            };
            var createBoard = function (dates, newUsers, oldUsers, pbNewUsers, pbOldUsers) {
                var boardColumn = echarts.init(document.getElementById('board-column'));
                boardColumnOption = {
                    title: {
                        text: '用户留存率'
                    },
                    grid: {
                        bottom: '150',
                        top: '100'
                    },
                    legend: {
                        data: ['新用户数', '老用户数','新用户留存率','老用户留存率']
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: true,
                                readOnly: false
                            },
                            magicType: {
                                show: true,
                                type: ['line', 'bar']
                            },
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: dates,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: { //坐标轴刻度标签的相关设置。
                            interval: 0,
                            rotate: "45"
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'cross' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            name: '用户数',
                            min: 0,
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        {
                            type: 'value',
                            name: '留存率',
                            min: 0,
                            axisLabel: {
                                formatter: '{value} %'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '新用户',
                            type: 'bar',
                            barWidth: '30%',
                            data: newUsers
                        }, {
                            name: '老用户',
                            type: 'bar',
                            barWidth: '30%',
                            data: oldUsers
                        }, {
                            name: '新用户留存率',
                            type: 'line',
                            yAxisIndex: 1,
                            data: pbNewUsers
                        }, {
                            name: '老用户留存率',
                            type: 'line',
                            yAxisIndex: 1,
                            data: pbOldUsers
                        }
                    ]
                };
                boardColumn.setOption(boardColumnOption);
            };
            getBoardInfos();
            $("#header").load("../head.html");
            App.init();
        })
    </script>
    <!-- /JAVASCRIPTS -->
</body>

</html>